<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>我的订单</title>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_474420_0o6wv3e9gbbuik9.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<style type="text/css">
		.order_li{background: #fff;margin:.2rem 0;}
		.order_top{overflow: hidden;position: relative;padding: .3rem;}
		.order_top .order_left{float: left;background: #eeeeee;border-radius: .1rem;display: table;width: 1.8rem;height: 1.8rem;}
		.order_top .order_left span{display: table-cell;vertical-align: middle;text-align: center;}
		.order_top .order_left span img{vertical-align: middle;width: 1.8rem;height: 1.8rem;border-radius: .1rem;}
		.order_right{float: left;overflow: hidden;margin-left: .15rem;width: 4.9rem;}
		.order_info{width: 3.65rem;float: left;}
		.order_name{font-size: .28rem;color: #333333;line-height: .42rem;
			 overflow: hidden;
		     text-overflow: ellipsis;
		     display: -webkit-box;
		     -webkit-line-clamp: 4;
		     -webkit-box-orient: vertical;
		}
		.order_size{font-size: .26rem;color: #999;margin-top: .1rem;}
		.order_dece{text-align: right;float: right;width: 1.2rem;}
		.order_dece>li:first-child{font-size: .26rem;color: #333333;}
		.order_dece>li:last-child{font-size: .26rem;color: #999;line-height: .45rem;}
		.order_dece del{font-size: .22rem;color: #999;}
		.order_bottom{position: relative;height: .78rem;line-height: .78rem;text-align: right;padding-right: .3rem;font-size: .24rem;color: #333;}
		.order_bottom1{position: relative;height: .9rem;line-height: .9rem;text-align: right;padding-right: .3rem;font-size: .24rem;color: #333;}
		.order_bottom span{font-size: .3rem;color: #fb597b;}
		.deleteOrder{width: 1.67rem;height: .7rem;border:1px solid #a5a5a5;text-align: center;font-size: .24rem;color: #333333;border-radius: .5rem;background: #fff;}
		.confirmOrder{width: 1.67rem;height: .7rem;border:1px solid #fb597b;text-align: center;font-size: .24rem;color: #fb597b;border-radius: .5rem;background: #fff;}

	</style>
</head>
<body class="bgcolor">
<div id="app">
	<!-- <ul class="partTab">
		<li class="active"><span>全部</span></li>
		<li><span>待发货</span></li>
		<li><span>待收货</span></li>
	</ul> -->
	<div class="emptyAdress" v-if="list.length==0">
		暂时没有订单哟~
	</div>
	<ul class="order_ul">
		<li class="order_li" v-for="item in list" v-if="item.state==0||item.state==3" @click="goNext(item.id)">
			<div class="order_top">
				<div class="order_left">
					<span>
						<img :src="item.good.url" alt="">
					</span>
				</div>
				<div class="order_right">
					<ul class="order_info">
						<li class="order_name">{{item.good.name}}</li>
						<li class="order_size">{{item.good.desc}}</li>
					</ul>
					<ul class="order_dece">
						<li>￥{{item.rprice}}</li>
						<li></li>
						<!-- <li><del>￥{{item.good.good.price}}</del></li> -->
						<li>x{{item.count}}</li>
					</ul>
				</div>
			</div>
			<div class="order_bottom borderTop">
				共{{item.count}}件商品 合计：<span>￥{{item.price}}</span>（含运费￥0.00）
				<span v-if="item.state==0">等待付款</span>
				<span v-else-if="item.state==1">已付款</span>
				<span v-else-if="item.state==2">付款成功</span>
				<span v-else-if="item.state==3">支付失败</span>
				<span  v-else-if="item.state==4">已取消</span>
				<span  v-else-if="item.state==5">已退款</span>
				<span  v-else-if="item.state==6">已发货</span>
				<span  v-else-if="item.state==7">已签收</span>
				<span  v-else-if="item.state==8">退货待确认</span>
				<span  v-else-if="item.state==9">退货中</span>
				<span  v-else>退货完成</span>
			</div>
		</li>
		<li class="order_li" v-else>
			<div class="order_top">
				<div class="order_left">
					<span>
						<img :src="item.good.url" alt="">
					</span>
				</div>
				<div class="order_right">
					<ul class="order_info">
						<li class="order_name">{{item.good.name}}</li>
						<li class="order_size">{{item.good.desc}}</li>
					</ul>
					<ul class="order_dece">
						<li>￥{{item.rprice}}</li>
						<li></li>
						<!-- <li><del>￥{{item.good.good.price}}</del></li> -->
						<li>x{{item.count}}</li>
					</ul>
				</div>
			</div>
			<div class="order_bottom borderTop">
				共{{item.count}}件商品 合计：<span>￥{{item.price}}</span>（含运费￥0.00）
				<span v-if="item.state==0">等待付款</span>
				<span v-else-if="item.state==1">已付款</span>
				<span v-else-if="item.state==2">付款成功</span>
				<span v-else-if="item.state==3">支付失败</span>
				<span  v-else-if="item.state==4">已取消</span>
				<span  v-else-if="item.state==5">已退款</span>
				<span  v-else-if="item.state==6">已发货</span>
				<span  v-else-if="item.state==7">已签收</span>
				<span  v-else-if="item.state==8">退货待确认</span>
				<span  v-else-if="item.state==9">退货中</span>
				<span  v-else>退货完成</span>
			</div>
		</li>
	</ul>
	

</div>
<script type="text/javascript">
	 var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:GetQueryString("unionid"),
		        token:GetQueryString("token")
		       
			},
			mounted(){
			  this.getList();
			},
			methods:{
				getList(){
					var that=this;
					ajaxFun("GET","/trade/order/list",{
	                       token:this.token
	                       // id:this.token 

	                    },function(data){
	                    	if(data.error==0){
                              that.list=data.orders;
                              console.log(data.orders)
	                    	}else{

	                    	}
	                     
                    }); 
				},
				goNext(id){
					var that=this;
					wx.miniProgram.navigateTo({
  						url: '/pages/pay/pay?token='+this.token+'&id='+id
					});
				}
			}
		});
</script>	
</body>
</html>